<template>
  <div class="container">
    <ul ref="titleBar" class="table-title-wrapper" :style="{width:pwidth}">
      <li class="table-title" v-for="(titleItem,index) in tableData.title" :key="index">{{titleItem}}</li>
    </ul>
    <div class="dot">

    </div>
    <ul ref="indexBar" class="table-title-index-wrapper">
      <li class="table-title-index" v-for="(row,index)  in tableData.rows" :key="index">{{index}}</li>
    </ul>
    <div ref="tableWrapper" class="tableWrapper">
      <table ref="dataTable" :style="{width:pwidth}" cellpadding="0" cellspacing="0" border="0"
             @touchstart.stop.prevent="touchStartHandler" @touchmove.stop.prevent="touchMoveHandler"
             @touchend.stop.prevent="touchStopHandler">
        <tr :key="index" v-for="(row,index)  in tableData.rows">
          <td :key="index" v-for="(col,index)  in row">{{col}}</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
  import './style.less';

  const item = [];
  const pos = {
    startY: 0,
    startX: 0,
    initX: 40,
    initY: 30,
    currentX: 40,
    currentY: 30,
    offsetX: 0,
    offsetY: 0,
  };

  let doCheck = true;

  export default {
    name: 'DocTable',
    props: {
      tableData: {
        type: Object,
      },
      pwidth: String,
    },
    data: function() {
      return {
        containerHeight: 0,
        tableHeight: 0,
        containerWidth: 0,
        tableWidth: 0,
      };
    },
    created() {

      // setTimeout(()=>{
      //   this.$emit('needMoreData');
      // },1000)
    },
    mounted() {
      // 开始要计算是不是要额外获取数据填充页面

      const interval = setInterval(() => {
        if (doCheck) {
          this._checkNeedData();
        } else {
          clearInterval(interval);
        }
      }, 200);

    },
    methods: {
      touchStartHandler(e) {
        let touch = e.touches[0];
        pos.startY = touch.pageY - pos.currentY + pos.initY;
        pos.startX = touch.pageX - pos.currentX + pos.initX;
      },
      touchStopHandler(e) {
        let touch = e.touches[0];
        if (!this._checkCanSwipMoreY()) {
          pos.currentY = -this.tableHeight + this.containerHeight;
          this._changeIndexBar(pos.currentY);
          this._changeContentY(pos.currentY);

        }
        if (!this._checkCanSwipMoreX()) {
          pos.currentX = -this.tableWidth + this.containerWidth;
          this._changeTitleBar(pos.currentX);
          this._changeContentX(pos.currentX);

        }
      },
      touchMoveHandler(e) {
        let touch = e.touches[0];
        pos.offsetY = touch.pageY - pos.startY;
        pos.offsetX = touch.pageX - pos.startX;

        if (pos.currentY + pos.offsetY < 30) {
          pos.currentY = pos.initY + pos.offsetY;
          this._changeIndexBar(pos.currentY);
          this._changeContentY(pos.currentY);
        } else {
          this._changeIndexBar(pos.initY);
          this._changeContentY(pos.initY);
        }

        if (pos.currentX + pos.offsetX < 40) {
          pos.currentX = pos.initX + pos.offsetX;
          this._changeTitleBar(pos.currentX);
          this._changeContentX(pos.currentX);
        } else {
          this._changeTitleBar(pos.initX);
          this._changeContentX(pos.initX);
        }

        this._checkNeedData();

      },

      // 因为变更属行然后 updateComponent 是异步操作，如果用监听属性来进行css赋值，可能会导致页面滑动不够平滑，所以这里使用$refs 的方式来做成同步的更新位置偏移，体验更好一点
      _changeIndexBar(offset) {
        this.$refs.indexBar.style.top = offset + 'px';

      },
      _changeTitleBar(offset) {
        this.$refs.titleBar.style.left = offset + 'px';
        this.$refs.dataTable.style.left = offset + 'px';
      },
      _changeContentX(offset) {
        this.$refs.dataTable.style.left = offset + 'px';
      },
      _changeContentY(offset) {
        this.$refs.dataTable.style.top = offset + 'px';
      },
      _checkCanSwipMoreY() {
        this.containerHeight = parseInt(getComputedStyle(this.$refs.tableWrapper).height);
        this.tableHeight = parseInt(getComputedStyle(this.$refs.dataTable).height);

        if (this.tableHeight + pos.currentY <= this.containerHeight) {
          return false;
        }
        return true;
      },
      _checkCanSwipMoreX() {
        this.containerWidth = parseInt(getComputedStyle(this.$refs.tableWrapper).width);
        this.tableWidth = parseInt(getComputedStyle(this.$refs.dataTable).width);

        if (this.tableWidth + pos.currentX <= this.containerWidth) {
          return false;
        }
        return true;
      },
      _checkNeedData() {
        this.containerHeight = parseInt(getComputedStyle(this.$refs.tableWrapper).height);
        this.tableHeight = parseInt(getComputedStyle(this.$refs.dataTable).height);
        if (this.containerHeight < this.tableHeight) {
          doCheck = false;
        }
        if (this.containerHeight > this.tableHeight || (this.tableHeight + pos.currentY) <= this.containerHeight) {
          this.$emit('needMoreData');
        }
      },
    },
  };
</script>

<style scoped>

</style>
